<template>
    <div>
        <el-page-header @back="back" content="详情页面"></el-page-header>
        <div class="interspaceH"></div>
        <el-card style="height: 50vh">
            <div style="display:flex;">
                <div style="flex: 5;padding: 20px;border-right: 1px solid rgb(237, 237, 237)">
                    <div>
                        <el-descriptions class="margin-top" title="任务详情" :column="1">
                            <el-descriptions-item label="群发员工">全部客户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预计发送19个客户
                            </el-descriptions-item>
                            <el-descriptions-item label="群发类型">客户群发</el-descriptions-item>
                            <el-descriptions-item label="发送时间">{{ missionInfo.createTime }}</el-descriptions-item>
                            <el-descriptions-item label="发送状态">待发送</el-descriptions-item>
                            <el-descriptions-item label="群发内容" :contentStyle="{'height': '120px'}">
                                {{ missionInfo.missionName }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <div style="display:flex;justify-content: space-between;border-top: 1px solid rgb(237, 237, 237);padding: 20px 0">
                        <div style="flex: 1;" v-for="(item, index) in statisticsList" :key="index">
                            <div style="text-align: center;font-size: 36px;color: rgb(0, 131, 255);">{{
                                    item.value
                                }}
                            </div>
                            <div style="text-align: center">{{ item.label }}</div>
                        </div>
                    </div>
                </div>

                <div style="flex: 2;display: flex;justify-content: center;">
                    <iframe src="http://wx.zzxapps.com/pages/chat/HM-chat" style="border: 0;height: 100%;"></iframe>
                </div>
            </div>
        </el-card>

        <div class="interspaceH"></div>

        <div style="display:flex;min-height: 350px">
            <el-card style="flex: 10">
                <div style="font-weight: 600">成员详情</div>
                <div class="interspaceH"></div>
                <div style="display: flex;justify-content: space-between">
                    <el-radio-group v-model="memberType" size="small" style="display: flex">
                        <el-radio-button label="1">本次推送全部成员</el-radio-button>
                        <el-radio-button label="2">已发送成员</el-radio-button>
                        <el-radio-button label="3">未发送成员</el-radio-button>
                    </el-radio-group>
                    <el-input size="small" style="width: 200px" placeholder="请输入成员名称"></el-input>
                </div>
                <div class="interspaceH"></div>
                <el-pagination background current-page="0" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                               layout="total, sizes, prev, pager, next, jumper" :total="0"></el-pagination>
            </el-card>

            <div style="flex: 0.2"></div>

            <el-card style="flex: 10">
                <div style="font-weight: 600">客户详情</div>
                <div class="interspaceH"></div>
                <div style="display: flex;justify-content: space-between">
                    <el-radio-group v-model="clientType" size="small" style="display: flex">
                        <el-radio-button label="1">本次推送全部客户</el-radio-button>
                        <el-radio-button label="2">已发送</el-radio-button>
                        <el-radio-button label="3">未送达客户</el-radio-button>
                        <el-radio-button label="4">客户接受达上限</el-radio-button>
                        <el-radio-button label="5">已不是好友客户</el-radio-button>
                    </el-radio-group>
                    <el-input size="small" style="width: 200px" placeholder="请输入客户名称"></el-input>
                </div>
                <div class="interspaceH"></div>

                <el-pagination background current-page="0" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                               layout="total, sizes, prev, pager, next, jumper" :total="0"></el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    props: {
        missionInfo: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            memberType: '1',
            clientType: '1',
            statisticsList: [
                {
                    label: '已发送成员',
                    value: 0
                },
                {
                    label: '未发送成员',
                    value: 0
                },
                {
                    label: '已送达客户',
                    value: 0
                },
                {
                    label: '未送达客户',
                    value: 0
                },
                {
                    label: '客户接收上限',
                    value: 0
                }
            ]
        }
    },
    methods: {
        back() {
            this.$emit("currentHandle", "list")
        }
    }
}
</script>

<style scoped>
div {
    font-size: 14px;
}
</style>
